<template>
    <article class="zw-steps main">
        <div class="zw-steps-list">
            <div
                v-for="(item, i) in props.options"
                :key="i"
                class="zw-steps-item"
                :class="{
                    success: props.modelValue > i,
                    selected: props.modelValue === i
                }">
                <div class="step-item-icon">
                    <el-icon v-if="i < props.modelValue" color="#ff6b00" size="20"><Check /></el-icon>
                    <span v-else>{{ i + 1 }}</span>
                </div>
                <span class="step-item-label">
                    {{ item.label }}
                </span>
            </div>
        </div>
    </article>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { Check } from '@element-plus/icons-vue';
// 该组件是群裂变重构时与其他的步骤条无法共用，因此重新写了一份新的. 旧版本的步骤条与目前的ui样式不一致

// 配置的每项步骤信息类型
interface IOptionsItem {
    label: string;
}
interface Props {
    modelValue: number;
    options: IOptionsItem[];
}

// 默认空数组，选择第一项
const props = withDefaults(defineProps<Props>(), {
    modelValue: 0,
    options: () => []
});
</script>

<style lang="scss" scoped>
.zw-steps {
    padding: 36px 67px 20px;
    margin-bottom: 35px;
    overflow-x: auto;
    overflow-y: hidden;
    :deep(.el-card__body) {
        padding: 20px 32px;
        overflow-x: auto;
    }

    .zw-steps-list {
        display: flex;
        gap: 6px;
        .zw-steps-item {
            display: flex;
            align-items: center;
            position: relative;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #999999;
            line-height: 24px;
            --active-color: #eaeaea;
            &.success {
                --active-color: #ff6b00;
                .step-item-icon {
                    border: 1px solid var(--active-color);
                }
                .step-item-icon span {
                    color: var(--active-color);
                }
                .step-item-label {
                    color: #585858;
                }
            }
            &.selected {
                --active-color: #ff6b00;
                .step-item-icon {
                    border: 1px solid transparent;
                    background-color: var(--active-color);
                }
                .step-item-icon span {
                    color: #ffffff;
                }
                .step-item-label {
                    color: #585858;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                }
            }
            &:not(.zw-steps-item:last-child) {
                width: 300px;
                max-width: 500px;
                min-width: 180px;
                &::after {
                    content: '';
                    flex: 1;
                    height: 1px;
                    top: 50%;
                    margin: 0 16px;
                    background-color: var(--active-color);
                }
            }
            .step-item-icon {
                margin-right: 6px;
                flex: 0 0 32px;
                width: 32px;
                height: 32px;
                line-height: 32px;
                border-radius: 50%;
                border: 1px solid rgba(0, 0, 0, 0.15);
                display: inline-block;
                text-align: center;
                .el-icon {
                    vertical-align: sub;
                    display: inline-block;
                }
            }
            .step-item-label {
                color: #999999;
                min-width: max-content;
            }
        }

        .zw-steps-item:last-child {
            .step-item-label {
                padding-right: 40px;
            }
        }
    }
}
</style>
